<template>
  <el-dialog 
    title='新增'
   :class='[{"big-60":bumenVisible}]'
    :visible.sync="visible"
    @close='handleClose'
    top='10vh'
    >
    <div class="form-wrap">
      <el-form ref='detailManageForm' :model='form' :rules="rules" label-position='left' label-width="100px">

        <el-form-item label='角色名称' prop='name'>

          <el-input v-model='form.name' style='width:217px' />

        </el-form-item>
     

        <el-form-item label='区域' prop='personType'>

           <el-select v-model='form.personType'>
            <el-option v-for='(k,i) in personTypeList' :value='k.value' :label='k.label' :key ='i'/>
          </el-select>
        </el-form-item>


        <el-form-item label='选择公司' prop='setid'>
          <el-select
           v-model='form.setid' 
           @change ='()=>this.form.deptId =""'
           clearable
          >
            <el-option v-for='(k,i) in jituanList' :label='k.descr' :value='k.setid' :key='i'/>
          </el-select>
        </el-form-item>

         <el-form-item label='选择部门' prop='deptId'>
          <el-input 
          :disabled='!form.setid'
          :placeholder='form.setid?"":"请先选择公司"'
          icon='search'
          :on-icon-click='()=>this.bumenVisible = true'
          @focus.stop="bumenVisible = true" 
          readonly
          style='width:217px' 
          :title='form.deptId'
           v-model.trim='form.deptId' />


            <bumenDiv @getBumenData='data=>this.form.deptId = data' :bumenVisible.sync='bumenVisible' :setid='form.setid'/>

        </el-form-item>



         <el-form-item label='通用角色' prop='commonRoleId'>
          <el-select v-model='form.commonRoleId'>
            <el-option v-for='(k,i) in commonRoleList' :value='k.id' :label='k.name' :key ='i'/>
          </el-select>
        </el-form-item>

         <el-form-item label='备注'>
          <el-input type="textarea" style="width:80%" v-model.trim='form.remark' />
        </el-form-item>

        
      </el-form>
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('detailManageForm')">添 加</el-button>
    </span>

  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Message, Checkbox, Radio } from 'element-ui'
import bumenDiv from './bumenDiv'
Vue.use(Radio)
Vue.use(Checkbox)
import Bus from './bus'
export default {
  components: {
    bumenDiv
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    jituanList: {
      type: Array,
      default: function () {
        return []
      }
    },
    commonRoleList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {

    const rules_personType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择区域'))
      }

      callback()
    }


    return {
      visible: false,
      bumenVisible: false,
      form: {
        name: '',
        commonRoleId: '',
        deptId: '',
        setid: '',
        remark: '',
        personType: ''
      },
      rules: {
        name: [
          {
            required: true, message: '请输入角色名称', trigger: 'submit'
          }
        ],
        personType: [
          {
            required: true, validator: rules_personType, trigger: 'submit'
          }
        ],
        deptId: [
          {
            required: true, message: '请选择部门', trigger: 'submit'
          }
        ],
        setid: [
          {
            required: true, message: '请选择公司', trigger: 'submit'
          }
        ]

      },
      personTypeList: [
        {
          value: 1,
          label: '内地'
        }, {
          value: 2,
          label: '内派'
        }, {
          value: 3,
          label: '香港'
        }],

    }
  },


  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    }
  },

  methods: {

    handleClose () {

      for (const key in this.form) {
       this.form[key] = ''
      }
      this.$emit("update:dialogVisible", false)

    },

    transFromDeptId (data) {

      const start = data.lastIndexOf('(') + 1, end = data.length - 1
      return data.substring(start, end)

    },
    getSetName (setid) {
      let result = ''
      this.jituanList.forEach(ele => {
        if (ele.setid === setid) result = ele.descr
      })
      return result
    },
    handleSure (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const params = {
            commonRoleId: this.form.commonRoleId,
            deptId: this.transFromDeptId(this.form.deptId),
            name: this.form.name,
            personType: this.form.personType,
            remark: this.form.remark,
            setid: this.form.setid,
            setName: this.getSetName(this.form.setid)
          }

          this.Axios
            .Post('/wfConfAssigneeHolder/addAssigneeHolder', params)
            .then(res => {

              if (res.data.status == 1) {

                Message({
                  type: 'success',
                  message: res.data.message
                })

                Bus.$emit('refresh', Math.random())

              }

              this.handleClose()
            })


        } else {

          return false
        }
      })
    },

  },
}
</script>

<style scoped>
.form-wrap {
  padding: 20px 0 0 40px;
}
</style>
<style>


.big-60 .el-dialog--small {
  width: 60%;
}
</style>